<!--
 * @Description: 自定义公共组件
 *	props属性:
 *		1.class { string } default:"" 最外层class
 *		2.title { String } default:"标题" 标题，若不想有标题请设置空字符串
 *		3.icon { String } default:"icon2.png" 图标，若不想有图标请设置空字符串
 *  触发事件
 *		4.close 参数:无 组件销毁时触发
-->
<template>
  <div class="panelTem" :class="props.class">
    <div class="panelTitle">
      <!-- <img v-if="icon" class="panelIcon" :src="props.icon" /> -->
      <span v-if="title" class="panelLabel">{{ props.title }}</span>
      <img class="panelClose" :src="defaultClose" @click="emits('close')" />
    </div>
    <div class="panelBody">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import closeIcon from '@/assets/images/icon/close.png';

// import titleIcon from '@/assets/images/icon/icon2.png';

const defaultClose = closeIcon;
const emits = defineEmits(['close']);

const props = defineProps({
  class: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '标题',
  },
});
</script>

<style lang="scss" scoped>
.panelTem {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 10px 16px 24px 16px;
  background: linear-gradient(180deg, rgba(20, 57, 91, 0.2) 0%, rgba(72, 148, 255, 0) 9.71%),
    linear-gradient(
      174.85deg,
      rgba(20, 57, 91, 0.7) 73.27%,
      rgba(20, 57, 91, 0.5) 93.78%,
      rgba(161, 176, 189, 0.3) 100%
    );
  // background-image: url('@/assets/images/img/lc弹窗.png');
  // background-size: 100% 100%;
  border: rgb(99, 148, 197) 1px solid;
  border-radius: 8px;

  .panelTitle {
    display: flex;
    flex-grow: 0;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    order: 0;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    // cursor: move;
    .panelLabel {
      flex-grow: 0;
      height: 22px;
      font-weight: 900;
      font-size: 18px;
      font-family: pht-bold;
      font-style: normal;
      line-height: 22px;
      background: linear-gradient(180deg, #ffffff 30.54%, #7ab9f0 66.63%, #c1dff8 83.12%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .panelIcon {
      width: 16.25px;
      height: 16.25px;
    }
    .panelClose {
      width: 20px;
      margin-left: auto;
      cursor: pointer;
    }
  }
  .panelBody {
    position: relative;
    width: 100%;
    height: calc(100% - 38px);
  }
}
</style>
